'use client';

import { useMemo } from 'react';

// RHF
import { useFormContext, useWatch } from 'react-hook-form';

// React Wizard
import { Wizard } from 'react-use-wizard';

import { Badge } from 'lucide-react';

// ShadCn
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { useTranslationContext } from '@/context/TranslationContext';

//
import WizardStep from './form/wizard/WizardStep';
import { BillFromSection } from './form/sections/BillFromSection';

import { InvoiceDetails } from './form/sections/InvoiceDetails';
import { Items } from './form/sections/Items';
import { PaymentInformation } from './form/sections/PaymentInformation';
import { InvoiceSummary } from './form/sections/InvoiceSummary';
import { BillToSection } from './form/sections/BillToSection';

export const InvoiceForm = () => {
    const { _t } = useTranslationContext();

    const { control } = useFormContext();

    // Get invoice number variable
    const invoiceNumber = useWatch({
        name: 'details.invoiceNumber',
        control,
    });

    const invoiceNumberLabel = useMemo(() => {
        if (invoiceNumber) {
            return `#${invoiceNumber}`;
        } else {
            return _t('form.newInvBadge');
        }
    }, [invoiceNumber]);

    return (
        <div className={`xl:w-[55%]`}>
            {/* @ts-ignore */}
            <Card>
                {/* @ts-ignore */}
                <CardHeader>
                    <div className="flex gap-3">
                        {/* @ts-ignore */}
                        <CardTitle className="flex items-center gap-3">
                            <span className="uppercase">{_t('form.title')}</span>
                        </CardTitle>
                        {/* @ts-ignore */}
                        <span className="flex justify-center items-center gap-1">
                            {/* @ts-ignore */}
                            <Badge variant="secondary" className="w-fit" />
                            {/* 这块不应该嵌入到Badge的内部，nextjs会报错 */}
                            <span style={{ fontSize: '14px' }}>{invoiceNumberLabel}</span>
                        </span>
                    </div>
                    {/* @ts-ignore */}
                    <CardDescription>{_t('form.description')}</CardDescription>
                </CardHeader>
                {/* @ts-ignore */}
                <CardContent>
                    <div className="space-y-8">
                        <Wizard>
                            <WizardStep>
                                <div className="flex flex-wrap gap-x-20 gap-y-10">
                                    <BillFromSection />
                                    <BillToSection />
                                </div>
                            </WizardStep>
                            <WizardStep>
                                <div className="flex flex-wrap gap-y-10">
                                    <InvoiceDetails />
                                </div>
                            </WizardStep>

                            <WizardStep>
                                <Items />
                            </WizardStep>

                            <WizardStep>
                                <PaymentInformation />
                            </WizardStep>

                            <WizardStep>
                                <InvoiceSummary />
                            </WizardStep>
                        </Wizard>
                    </div>
                </CardContent>
            </Card>
        </div>
    );
};
